import { IconName } from '@/components/IconComponents'
import ReactECharts from '@/components/ReactECharts'
import { ICON_LIST } from '@/constants/global'
import useLayoutConfig from '@/zustand/useLayoutConfig'
import { Button, Col, ColorPicker, Row, Select } from 'antd'
import { useNavigate } from 'react-router-dom'

export default function Home() {
  const navigate = useNavigate()
  /** 👇 zustand 👇 */
  const isFixed = useLayoutConfig((s) => s.isFixed)
  const setIsFixed = useLayoutConfig((s) => s.setIsFixed)
  const themeMode = useLayoutConfig((s) => s.themeMode)
  const setThemeMode = useLayoutConfig((s) => s.setThemeMode)

  const toNotFound = () => {
    navigate('/home/123')
  }

  return (
    <div>
      Home
      <Button onClick={toNotFound}>TO NOT FOUND</Button>
      <Button onClick={() => setIsFixed(!isFixed)}>Toggle Fixed</Button>
      <Button onClick={() => setThemeMode(themeMode === 'dark' ? 'light' : 'dark')}>
        Toggle Theme
      </Button>
      <br />
      <ColorPicker
        defaultValue="#1677ff"
        onChangeComplete={(color) => {
          console.log(color.toHex())
        }}
      />
      <br />
      <Select
        showSearch
        style={{ width: 200 }}
        options={ICON_LIST.map((i) => ({
          value: i.name,
          label: (
            <>
              <IconName name={i.font_class} /> - {i.font_class}
            </>
          ),
        }))}
      />
      <Row>
        <Col span={12}>
          <ReactECharts option={{}} showLoading />
        </Col>
        <Col span={12}>
          <ReactECharts option={{}} showLoading />
        </Col>
      </Row>
    </div>
  )
}
